import React, { Component } from 'react';
import { Modal, Form, Input ,InputNumber} from 'antd';
const FormItem = Form.Item;

class DeptAddModal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
     this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const {record} =this.props;
        values={
          ...record,
          ...values
        };
        onOk(values);
        this.hideModelHandler();
      }
    });
  };

  render() {

    const {form,record,title} =this.props;
  	const {name,id,seq,remark}=record;
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;

  	return (
      <span>
        <span onClick={this.showModelHandler}>
        { children }
        </span>
    <Modal
      title={title}
      visible={this.state.visible}
      onOk={this.okHandler}
      onCancel={this.hideModelHandler}
    >
      <Form  onSubmit={this.okHandler} >
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="部门名称"
      >
        {form.getFieldDecorator('name', {
          initialValue: name,
          rules: [{ required: true, message: 'Please input dept name' }],
        })(
          <Input placeholder="请输入部门名称" />
        )}
      </FormItem>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="展示顺序"
      >
        {form.getFieldDecorator('seq', {
          initialValue: seq,
          rules: [{ required: true, message: 'Please input dept seq' }],
        })(
          <InputNumber placeholder="请输入展示顺序" min={0} max={100}  />
        )}
      </FormItem>
      <FormItem
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 15 }}
        label="备注"
      >
        {form.getFieldDecorator('remark', {
          initialValue: remark,
          rules: [{ required: true, message: 'Please input dept remark' }],
        })(
          <Input placeholder="请输入备注" />
        )}
      </FormItem>
      </Form>
    </Modal>
    </span>
  );
  }
  
}  

export default Form.create()(DeptAddModal);


